<template>
  <div class="banner">
    <swiper
      :modules="swiperOptions.modules"
      :initialSlide="swiperOptions.initialSlide"
      :slides-per-view="1"
      :loop="swiperOptions.loop"
      :pagination="swiperOptions.pagination"
      :scrollbar="swiperOptions.scrollbar"
      :autoplay="swiperOptions.autoplay"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide
        v-for="item in banners"
        :key="item.id"
        @click="onBannerClick(item)"
      >
        <img class="banner-img" :src="item.picture_url" />
      </swiper-slide>
      <div class="swiper-pagination"></div>
    </swiper>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from "vue";
import { Pagination, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { getBannerList } from "@/api/index";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/pagination";


let swiperOptions = reactive({
  initialSlide: 1,
  modules: [Pagination, A11y, Autoplay],
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  loop: true,
  speed: 500,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

const swiperInstance = ref(null);
const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};
const onSlideChange = () => {
  // console.log("slide change");
};

let banners = ref([]);
const getBanner = () => {
  const params = {
    pageNo: 1,
    pageSize: 10,
    pubChannel: "退役军人",
  };
  getBannerList(params).then((res) => {
    if (res.code == 200) {
      console.log("banners",banners)
      banners.value = res.data;
    }
  });
};

const onBannerClick = (item) => {
  if (item.type == 2) {
    location.href = item.url;
  }
};



getBanner();
</script>





<style lang="scss" scoped>
.banner {
  margin: 0 16px 16px;
  height: 95px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;

  &-img {
    height: 95px;
    width: 100%;
    // object-fit: cover;
  }

  .swiper-pagination {
    bottom: 0;
  }
}
.swiper {
  --swiper-pagination-color: #ca261c; /* 两种都可以 */
}
</style>